<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardListRef" :key="item.title">
      <Card size="small" :loading="loading" :title="item.title" class="md:w-1/6 w-full !md:mt-0" style="cursor: pointer"
        :class="{ '!md:mr-6': index + 1 < 6, '!mt-6': index > 0 }" @click="clickCountToFn(item)">
        <template #extra>
          <!--          <Tag :color="item.color">{{ item.action }}</Tag>-->
        </template>

        <div class="py-4 px-4 flex justify-between items-center">
          <CountTo :startVal="1" :endVal="item.value" class="text-2xl" :color="item.color" v-if="!item.title1" />
          <div v-if="item.title1">
            <div>
              <span>{{ item.title1 }}</span><span>{{ item.value }}</span>
            </div>
            <div>
              <span>{{ item.title2 }}</span><span>{{ item[item.name2] }}</span>
            </div>
            <div v-if="item.title3">
              <span>{{ item.title3 }}</span><span>{{ item[item.name3] }}</span>
            </div>
            <div v-if="item.title4">
              <span>{{ item.title4 }}</span><span>{{ item[item.name4] }}</span>
            </div>
          </div>

          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="p-2 px-4 flex justify-between">
          <span>{{ item.title }}</span>
          <!--          <CountTo prefix="$" :startVal="1" :endVal="item.total" />-->
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { CountTo } from '@/components/CountTo';
import Icon from '@/components/Icon/Icon.vue';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
import { bookUserTimeCountApi } from '@/api/sys/sysData';
import { useGo } from '@/hooks/web/usePage';

import { ref, computed, watch, onMounted } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import util from '@/utils/util';

const growCardListRef = ref(growCardList);
const go = useGo();

const props = defineProps({
  loading: {
    type: Boolean,
  },
  // dateObj: {type:Object,default:{}},
  dateStr: {
    type: String,
    default: '',
  },
  dateType: {
    type: String,
    default: '',
  },
  dateRangeValue: {
    type: Array,
    default: [],
  },
});

const dateStr = computed(() => props.dateStr);
const dateType = computed(() => props.dateType);
const dateRangeValue = computed(() => props.dateRangeValue);
const dataList = ref({});
onMounted(() => {
  // console.log("---props.dateObj:",props.dateObj)
  searchFn();
});
watch(
  () => dateType.value,
  (vl) => {
    // console.log('--watch:dateType:', vl);
    if (vl) {
      searchFn();
    }
  },
);
watch(
  () => dateStr.value,
  (vl) => {
    // console.log('--watch:dateStr:', vl);
    if (vl) {
      searchFn();
    }
  },
);
watch(
  () => dateRangeValue.value,
  (vl) => {
    // console.log('--watch:dateRangeValue:', vl);
    if (vl) {
      searchFn();
    }
  },
);
function change(vl) {
  console.log('--watch::', vl);
}

function searchFn() {
  let data = {
    dateStr: dateStr.value,
    dateType: dateType.value,
    // times:dateRangeValue.value
  };
  if (dateRangeValue.value && dateRangeValue.value.length > 0) {
    data.startDate = dateRangeValue.value[0];
    data.endDate = dateRangeValue.value[1];
  }
  bookUserTimeCountApi(data).then((res) => {
    if (res.code == 200) {
      let dataJson = res.data;
      // dataList.value=dataJson;
      for (let a = 0; a < growCardListRef.value.length; a++) {
        let valueElement = growCardListRef.value[a];
        for (let b in dataJson) {
          if (b == valueElement.name && dataJson[b]) {
            valueElement.value = dataJson[b];
          }
        }
        if (valueElement.title2 && dataJson[valueElement.name2]) {
          valueElement[valueElement.name2] = dataJson[valueElement.name2];
        }
        if (valueElement.title3 && dataJson[valueElement.name3]) {
          valueElement[valueElement.name3] = dataJson[valueElement.name3];
        }
        if (valueElement.title4 && dataJson[valueElement.name4]) {
          valueElement[valueElement.name4] = dataJson[valueElement.name4];
        }
      }
    } else {
      createMessage.error(res.message);
    }
  });
}

function clickCountToFn(item) {
  if (item.title == '待取货订单') {
    go('/shop/orderList');
  }
  if (item.title == '读书时长') {
    go('/feat/integral');
  }
  if (item.title == '读书积分') {
    go('/feat/integral');
  }
}
</script>
